<template>
<div class="page-content">
  <o-header id="oHeader-obottom"
            :showbar="showobar"
            :num="num">
  </o-header>
  <m-header v-if="showHeader"
            :showbar="showbar">
  </m-header>
  <router-view></router-view>
  <tabbar class="tabbar"
          id="tabbar">
    <tabbar-item link="drive"
                 :selected="selected0">
      <img slot="icon-active"
           src="../assets/tab_filelist_checked.png">
      <img slot="icon"
           src="../assets/tab_filelist_normal.png">
      <span slot="label">网盘</span>
    </tabbar-item>
    <tabbar-item link="share"
                 :selected="selected1">
      <img slot="icon-active"
           src="../assets/tab_share_checked.png">
      <img slot="icon"
           src="../assets/tab_share_normal.png">
      <span slot="label">分享</span>
    </tabbar-item>
    <tabbar-item link="more"
                 :selected="selected2"
                 show-dot>
      <img slot="icon-active"
           src="../assets/tab_about_me_checked.png">
      <img slot="icon"
           src="../assets/tab_about_me_normal.png">
      <span slot="label">更多</span>
    </tabbar-item>
  </tabbar>
</div>

</template>

<script>
import mHeader from '../components/mHeader';
import oHeader from '../components/oHeader';
import { Tabbar, TabbarItem } from 'vux';
import { mapState } from 'vuex';

export default {
  components: {
    mHeader,
    oHeader,
    Tabbar,
    TabbarItem
  },
  data() {
    return {
      selected0: this.$route.path === '/drive',
      selected1: this.$route.path === '/share',
      selected2: this.$route.path === '/more'
    }
  },
  computed: {
    ...mapState({
          showHeader: state => state.mHeader.display,
          showbar: state => state.mHeader.tab,
          showobar: state => state.oHeader.tab,
          num: state => state.oHeader.num
    })
  }
}

</script>

<style>
.oHeader-obottom {
  display: none;
}

.page-content {
  position: relative;
}

.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
  color: #3888FF!important;
}
</style>
